<style lang="scss" scoped>
    @import '../../css/study-plan.scss';
    .count-box{background: #fff;padding:30px;}
    .chart-box{padding: 30px 0;background: #fff;}
    .chart-title{font-size: 18px;font-weight: bold;padding-bottom: 20px;}
    .chart-in{border:1px  solid #e1e7eb;padding: 0 0 20px 30px;background: #fff;}
    .chart-word{font-size: 18px;font-weight: bold;padding: 20px 0 0 28px;}
    .count-detail{background: #fff;width: 100%;color:$mc2;border-collapse:collapse;font-size: 14px;border:1px  solid #e1e7eb;}
    .title-right{color: $mco;cursor: pointer;}
    .title-left{font-size: 18px;font-weight: bold;}

    .plan-main-head{padding: 18px 0;background: #fcfdff;text-align: center;}
    .plan-main{background: #fff;text-align: center;padding: 14px 0}
    .word-btn{color: $mco;cursor: pointer;}
</style>

<template>
    <section>
        <section class="count-box mt">
            <section class="chart-box">
                <div class="chart-title">《{{studyTitle}}》学习计划数据汇总</div>
                <section class="chart-in">
                    <div id="main" style="width: 800px;height: 400px;"></div>
                    <div class="chart-word">平均完成进度{{averageRate}}</div>
                </section>
            </section>

            <section class="clearfix">
                <p class="pt20 pb20">
                    <span class="title-left">《{{studyTitle}}》学习计划数据明细</span>
                    <span class="fr title-right" @click="gotoQuestion" v-if="questionID!=0">问卷结果</span>
                </p>
                <div class="count-detail">
                    <el-row class="plan-main-head">
                        <el-col :span="3">学员名字</el-col>
                        <el-col :span="3">状态</el-col>
                        <el-col :span="3">完成度</el-col>
                        <el-col :span="3">进度</el-col>
                        <el-col :span="5">考试成绩</el-col>
                        <el-col :span="4">开始学习时间</el-col>
                        <el-col :span="3">操作</el-col>
                    </el-row>
                    <template v-for="one in list">
                        <el-row class="plan-main">
                            <el-col :span="3">{{one.Username||'-'}}</el-col>
                            <el-col :span="3">{{one.Status==1?'开始学习':one.Status==2?'已完成':'未开始'}}</el-col>
                            <el-col :span="3">{{one.CompleteRate||'-'}}</el-col>
                            <el-col :span="3">{{taskWordList[one.Progress]}}</el-col>
                            <el-col :span="5">{{one.ExamScore||'-'}}</el-col>
                            <el-col :span="4">{{one.StudyStartTime||'-'}}</el-col>
                            <el-col :span="3">
                                <span class="word-btn" @click="gotoPaper(one)">{{one.ExamNum==0?'-':'试卷明细'}}</span>
                            </el-col>
                        </el-row>
                    </template>
                    <el-row v-show="list.length==0" class="plan-main">
                        <el-col :span="24">暂无数据</el-col>
                    </el-row>
                </div>
                <div v-show="pageInfo.total>20">
                    <el-pagination class="mt20 fr"
                                   background
                                   @size-change="getList"
                                   @current-change="getList"
                                   :current-page.sync="pageInfo.page"
                                   :page-size="pageInfo.pageSize"
                                   layout="prev, pager, next, jumper"
                                   :total="pageInfo.total">
                    </el-pagination>
                </div>
            </section>

        </section>


    </section>
</template>

<script>

	import qs from 'qs'
	// 引入 ECharts 主模块
	var echarts = require('echarts/lib/echarts');
                    // 引入柱状图
                    require('echarts/lib/chart/bar');
                    // 引入提示框和标题组件
                    require('echarts/lib/component/tooltip');
                    require('echarts/lib/component/title');

	export default{
		data: function(){
			return {
			    studyID:this.$route.query.studyID,
			    studyTitle:this.$route.query.studyTitle,
                questionID:0,
				list:[],
                averageRate:'',
                pageInfo: {
                    pageSize: 20,
                    total:0,
                    page:1
                },
                path: [
                    {
                        'name':'培训学习',
                        'path':'/study/plan-list'
                    },
                    {
                        'name':'学习计划',
                        'path':'/study/plan-list'
                    },
                    {
                        'name':'学习计划统计'
                    }
                ],

                taskWordList:[
                    '-','任务一','任务二','任务三','任务四','任务五','任务六','任务七','任务八','任务九','任务十',
                    '任务十一','任务十二','任务十三','任务十四','任务十五','任务十六','任务十七','任务十八','任务十九','任务二十',
                    '任务二十一','任务二十二','任务二十三','任务二十四','任务二十五','任务二十六','任务二十七','任务二十八','任务二十九','任务三十'
                ]
            }
		},
		methods: {
            gotoPaper(one){
				if(one.ExamNum==0){
				    return
                }else {
				    if(one.ExamID>0){
                        this.$router.push({name:'studyPaperInfo',query:{examID:one.ExamID,employeeID:one.EmployeeID}})
                    }else {
                        this.$router.push({name:'studyPaperList',query:{studyID:this.studyID,employeeID:one.EmployeeID,studyTitle:this.studyTitle}})
                    }
                }
			},
            gotoQuestion(){
                this.$router.push({name:'studyPaperResult',query:{examID:this.questionID}})
            },
            getList(){
                axios.post('/com/study/statistics', qs.stringify({
                    studyID:this.studyID,
                    pagesize:this.pageInfo.pageSize,
                    page:this.pageInfo.page
                })).then((res) => {
                    var d = res.data;
                    if(d.flag == 1){
                        this.list = d.data.Rows;
                    }else {
                        this.$message.error(d.msg)
                    }
                })
            }
		},
		mounted: function(){
            this.$store.commit('setPath', this.path)
            axios.post('/com/study/statistics', qs.stringify({
                studyID:this.studyID,
                pagesize:this.pageInfo.pageSize,
                page:this.pageInfo.page
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.list = d.data.Rows;
                    this.pageInfo.total=Number(d.data.Total);
                    this.averageRate = d.data.AverageRate;
                    this.questionID = d.data.QuestionID;
                    let main = document.getElementById('main');
                    let arr = [d.data.totalMemberNum,d.data.totalStartMemberNum,d.data.totalFinishMemberNum,d.data.totalExpireFinishMemberNum];
                    doEchart(arr,main);
                }else {
                    this.$message.error(d.msg)
                }
            })
		}
	}





	function doEchart(arr,main){
		if(window.attachEvent){
			window.attachEvent("onresize",function(){
				myChart.resize();
			});
		}else{
			window.addEventListener("resize",function(){
				myChart.resize();
			},false);
		};
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(main);

		// 绘制图表
		myChart.setOption({
			title: {
				text: ''
			},
			color: ['#689bf0'],
//			tooltip : {
//				trigger: 'axis',
//				axisPointer : {            // 坐标轴指示器，坐标轴触发有效
//					type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
//				}
//			},
			legend: {
				data:['学习总人数', '开始学习人数', '完成学习人数', '超时完成人数']
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis : [
				{
					type : 'category',
					data : ['学习总人数', '开始学习人数', '完成学习人数', '超时完成人数'],
					axisTick: {
						alignWithLabel: true
					}
				}
			],
			yAxis : [
				{
					type : 'value'
				}
			],
			series : [
				{
//					name:'培训场次',
					type:'bar',
					barWidth: '30%',  //柱图宽度
					data:arr,
					itemStyle: {
						normal: {
							label: {
								show: true,
								position: 'top',
								textStyle: {
									fontWeight:'bolder',
									fontSize : '14',
									fontFamily : '微软雅黑',
									color: '#666a80',
								},
								formatter:function(params,i){
									if(params.value==0){
										return '';
									}else
									{
										return params.data;
									}
								}
							}
						}
					},
				}
			]
		});
	}

</script>
